<template>
    <!-- 猎头公司信息收集 -->

    <div class="content" style="padding:40px;">

        <el-form :model="hrInfo" :rules="rules" ref="hrInfo" label-width="160px" class="demo-hrInfo" style="max-width:800px;">
            <h2 style="text-align:center">猎头公司信息</h2>
            <el-form-item label="公司" required prop="company_name">
                <el-input v-model="hrInfo.company_name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址" required prop="company_address">
                <el-input v-model="hrInfo.company_address"></el-input>
            </el-form-item>
            <el-form-item label="公司固定电话" prop="contact_phone">
                <el-input v-model="hrInfo.contact_phone"></el-input>
            </el-form-item>

            <el-form-item label="联系人" prop="contact_person">
                <el-input v-model="hrInfo.contact_person"></el-input>
            </el-form-item>
            <el-form-item label="联系人职位" prop="contact_position">
                <el-input v-model="hrInfo.contact_position"></el-input>
            </el-form-item>

            <el-form-item label="联系手机" prop="contact_mobile_phone">
                <el-input v-model="hrInfo.contact_mobile_phone"></el-input>
            </el-form-item>
            <el-form-item label="email" prop="contact_email">
                <el-input v-model="hrInfo.contact_email"></el-input>
            </el-form-item>
            <el-form-item label="招聘需求" prop="hiring_needs">
                <el-input type="textarea" v-model="hrInfo.hiring_needs"></el-input>
            </el-form-item>
            <el-form-item label="公司简介" prop="company_summary">
                <el-input type="textarea" v-model="hrInfo.company_summary"></el-input>
            </el-form-item>
            <el-form-item label="公司营业执照(必填)">

                <el-col>
                    <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" :on-success="handleBusinessSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="hrInfo.business_license" :src="hrInfo.business_license" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>

            </el-form-item>
            <el-form-item label="公司法人身份证(正面/必填)">
                <el-col>
                    <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" :on-success="handlefont_id_cardSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="hrInfo.font_id_card" :src="hrInfo.font_id_card" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>

            </el-form-item>
            <el-form-item label="公司法人身份证(反面/必填)">
                <el-col>
                    <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" :on-success="handleback_id_cardSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="hrInfo.back_id_card" :src="hrInfo.back_id_card" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>

            </el-form-item>

            <el-form-item label="公司环境">
                <!-- <el-col  style="height:160px;display: inline-block;text-align: center;"> -->
                <el-col>
                    <div v-for="(item,index) in environmentImgs" :key="index" class="img-item">
                        <div class="img-delete" @click="deleteEnvironmentImg(index)">
                            <i class="left"></i>
                            <i class="right"></i>
                        </div>
                        <img :src="item.src" @click="openEnvironmentGallery(index)" class="avatar">
                    </div>
                    <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>  -->
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="saveHrInfo('hrInfo')">保存</el-button>
                <el-button @click="resetForm('hrInfo')">重置</el-button>
            </el-form-item>
        </el-form>
        <lightbox :images="environmentImgs" ref="environmentLightbox" :showLightBox="showLightBox"></lightbox>
        <!-- <lightbox :images="environmentImgs"  ref="environmentLightbox" showLightBox="false"></lightbox>  -->
    </div>
</template>

<script>
import { uploadImgUrl } from '../../config';
import { mapGetters } from 'vuex';
import { fetchHrInfo, saveHrInfo } from 'api/remoteSearch';
import Lightbox from 'vue-image-lightbox';
require('vue-image-lightbox/dist/vue-image-lightbox.min.css')
export default {
    components: {
        Lightbox,
    },
    data() {
        return {

            showLightBox: false,
            uploadImgUrl,
            environmentImgs: [],
            hrInfo: {
                contact_position: '',
                font_id_card: '',
                back_id_card: '',
                business_license: '',
                company_pics: [],
                company_id: '',
                company_name: '',
                hiring_needs: '',
                company_summary: '',
                contact_person: '',
                contact_phone: '',
                contact_mobile_phone: '',
                contact_email: '',
                company_address: ''
            },
            rules: {
                contact_position: [{ required: true, message: '请输入联系人职位', trigger: 'blur' }],
                company_address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
                company_name: [
                    { required: true, message: '请输入公司名字', trigger: 'blur' },
                    // { required: true,type: 'string',message: "请输入合法的邮箱作为邮箱", trigger: 'blur' }
                ],
                contact_person: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
                contact_phone: [
                    { required: true, message: '请输入电话号码', trigger: 'blur' }
                ],
                contact_mobile_phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' },
                ],
                contact_email: [
                    { required: true, message: '请输入联系邮箱', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
                ],
                hiring_needs: [
                    { required: true, message: '请输入招聘需求', trigger: 'blur' }
                ],
                company_summary: [
                    { required: true, message: '请输入公司简介', trigger: 'blur' }
                ]
            }
        }
    },
    computed: {
        ...mapGetters([
            'user_id',
            'roles'
        ])
    },
    mounted() {
        if (this.roles.indexOf('hr') == -1) {
            this.$router.push({ path: '/' })
        }
        this.fetchHrInfo();
    },
    methods: {
        handleback_id_cardSuccess(res, file) {
            console.log(res)
            if (res.status == "success") {
                if (res.data.length > 0) {
                    console.log(this.hrInfo)
                    this.hrInfo.back_id_card = res.data[0].url;
                    return;
                }
            }
            this.$message.error("上传营业执照失败!");
        },
        handlefont_id_cardSuccess(res, file) {
            console.log(res)
            if (res.status == "success") {
                if (res.data.length > 0) {
                    console.log(this.hrInfo)
                    this.hrInfo.font_id_card = res.data[0].url;
                    return;
                }
            }
            this.$message.error("上传营业执照失败!");
        },
        handleBusinessSuccess(res, file) {
            console.log(res)
            if (res.status == "success") {
                if (res.data.length > 0) {
                    console.log(this.hrInfo)
                    this.hrInfo.business_license = res.data[0].url;
                    return;
                }
            }
            this.$message.error("上传营业执照失败!");
        },
        handleAvatarSuccess(res, file) {
            console.log(res)
            if (res.status == "success") {
                if (res.data.length > 0) {
                    console.log(this.hrInfo)
                    this.environmentImgs.push({
                        thumb: res.data[0].url,
                        src: res.data[0].url,
                        caption: 'caption to display. receive <html> <b>tag</b>', // Optional
                    })
                    return;
                }
            }
            this.$message.error("上传图片失败!");
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jepg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传图片只能是 jpg或png 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        fetchHrInfo() {
            let vm = this;
            // let 
            fetchHrInfo(vm.user_id)
                .then(res => {
                    if (res.data.status == 'success') {
                        for (var key in res.data.hr_info) {
                            if (res.data.hr_info[key]) {
                                vm.hrInfo[key] = res.data.hr_info[key]
                            }

                        }
                    }
                })
                .catch(err => {

                })
        },
        saveHrInfo(formName) {

            let vm = this;
            vm.$refs[formName].validate((valid) => {
                if (!valid) {//未验证通过
                    vm.$message({ message: '请填写完整猎头信息', type: 'error' })
                    return false;
                }
                let params = {};
                vm.environmentImgs.forEach(function(element) {
                    vm.hrInfo.company_pics.push(element.src)
                }, this);

                for (var key in vm.hrInfo) {
                    //保证每个都有填写
                    if (vm.hrInfo[key].length == 0) {
                        vm.$message({ message: '请填写完整猎头信息', type: 'error' })
                        return false;
                    }
                    if (vm.hrInfo[key]) {
                        params[key] = vm.hrInfo[key];
                    }
                }
                params['hr_id'] = vm.user_id;
                console.log(params)
                saveHrInfo(params)
                    .then(res => {
                        vm.$message({ message: res.data.msg })
                    })
                    .catch(err => {

                    })
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        openEnvironmentGallery(index) {
            //打开公司环境的lightbox
            this.$refs.environmentLightbox.showImage(index)

        },
        deleteEnvironmentImg(index) {
            console.log(index);
            [].splice()
            this.environmentImgs.splice(index, 1);
        }
    }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.avatar-uploader .el-upload:hover {
    border-color: #20a0ff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
}

.avatar {
    /* width: 160px; */
    height: 160px;
    line-height: 160px;
    float: left;
    /* margin: 10px; */
    cursor: pointer;
}

.vue-lb-container {
    z-index: 1001;
}

.img-item {
    margin: 10px;
    overflow: hidden;
    float: left;
}

.img-delete {
    width: 20px;
    height: 20px;
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
    /* left: 10px;
  top: 10px; */
    /* right: 0px;; */
}

.img-item:hover .img-delete .left {
    width: 3px;
    height: 20px;
    background-color: #333;
    position: absolute;
    left: 10px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg)
}

.img-item:hover .img-delete .right {
    width: 3px;
    height: 20px;
    background-color: #333;
    position: absolute;
    left: 10px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg)
}
</style>
